<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <style>
        .all{
            width:1000px;
            background: red;
            /* overflow: hidden;
            */
        }
        .box1{
            width:300px; height:400px; background: blue;
            float:left;
        }
        .box2{
            width:300px; height:400px; background: yellow;
            float:right;
        }

        /* 
            正常情况下，子元素的高度可以撑开父元素的高度
            但是，如果子元素添加了浮动，就撑不开父元素的高度

        为什么会出现高度塌陷
            子元素添加浮动，而父元素没有高度
        解决高度塌陷的方法
            1，给父元素添加高度  缺点：不灵活
            2，给父元素添加overflow:hidden; 触发一个BFC 缺点：溢出会被隐藏
            3，在需要清除的后面添加一个空标签(块元素) 
                <div style="clear: both; overflow: hidden; height:0;"></div>  缺点：代码冗余
            4，给父元素调用 万能清除浮动法（推荐使用）
              .clear::after{
                content: "";
                overflow: hidden;
                clear: both;
                height:0;
                display: block;
                visibility: hidden;
              }


              
        */
        .clear::after{
                content: "";
                overflow: hidden;
                clear: both;
                height:0;
                display: block;
                visibility: hidden;
                /* font-size:0; */
        }
        ::selection{
            background: green;
        }
   
    </style>
</head>
<body>
    <div class="all clear">
        <div class="box1"></div>
        <div class="box2"></div>
        <!-- <p style="clear: both; overflow: hidden; height:0;"></p> -->
    </div>
   <p>低迷</p>
   <span>卡</span>
</body>
</html>